<template>
    <div ref="echartsContainer" class="hk_echarts"></div>
</template>

<script setup>
    const props = defineProps({
        option: {
            type: Object,
            default:()=> new Object(),
            required:true
        }
    });

    // 组件的ref只想
    const echartsContainer = ref(null);

    // echarts 实例
    let chartInstance = null;

    onMounted(() => {
        if(props.option){
            chartInstance = echarts.init(echartsContainer.value);
            chartInstance.setOption(props.option);
        }
    });

    onUnmounted(() => {
        chartInstance && chartInstance.dispose();
    });

    // 监听option变化重新设置图表
    watch(() => props.option, (newOption) => {
        if (chartInstance) {
            chartInstance.setOption(newOption);
        }
    }, { deep: true });
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        chartInstance.resize();
    }, false);
</script>

<style scoped>
    .hk_echarts{
        width: 100%;
        height: 100%;
        flex: 1;
    }

</style>